<!DOCTYPE html>
<html>
<head>
    <title>WebVR Demo</title>
    <style>
        body {
            width: 100%;
            height: 100%;
            background-color: #000;
        }
    </style>
</head>
<body>
<script src="./js/three.min.js"></script>
<script src="./js/StereoEffect.js"></script>
<script src="./js/OrbitControls.js"></script>
<script src="./js/DeviceOrientationControls.js"></script>
<script src="./js/helvetiker_regular.typeface.js"></script>

<script>
    var scene, camera, renderer, effect, element, controls, word = "Hello shǎ guā", cube;
    init();

    function init() {
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.001, 700);
        camera.position.set(0, 15, 0);
        scene.add(camera);

        renderer = new THREE.WebGLRenderer();
        element = renderer.domElement;
        document.body.appendChild(renderer.domElement);

        effect = new THREE.StereoEffect(renderer);

        //Handle mouse control
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.target.set(
                camera.position.x + 0.01,
                camera.position.y,
                camera.position.z
        );
        window.addEventListener('deviceorientation', setDeviceOrientationControls, true);

        //Create light
        var light = new THREE.PointLight(0xffffff, 1.2, 0);
        light.position.set(0, 50, 0);
        scene.add(light);

        // Create floor
        var floorTexture = THREE.ImageUtils.loadTexture('img/grass.jpg');
        floorTexture.wrapS = THREE.RepeatWrapping;
        floorTexture.wrapT = THREE.RepeatWrapping;
        floorTexture.repeat = new THREE.Vector2(50, 50);
        var floorMaterial = new THREE.MeshPhongMaterial({
            map: floorTexture
        });
        var floorGeometry = new THREE.PlaneBufferGeometry(1000, 1000);
        var floor = new THREE.Mesh(floorGeometry, floorMaterial);
        floor.rotation.x = -Math.PI / 2;
        scene.add(floor);

        // Create box
        var geometry = new THREE.BoxGeometry(6, 6, 6);
        var material = new THREE.MeshNormalMaterial();
        cube = new THREE.Mesh(geometry, material);
        cube.position.set(0, 10, 20);//第一个参数 ：正数是向左移动负数向右移动；第二个参数：高低；第三个参数：远近距离
        scene.add(cube);

        //Create text
        var textGeometry = new THREE.TextGeometry(word, {
            size: 5,
            height: 1
        });
        var text = new THREE.Mesh(textGeometry, new THREE.MeshBasicMaterial({
            color: 0xffffff
        }));
        text.position.set(15, 15, -25);
        text.rotation.set(0, 30, 0);
        scene.add(text);

        animate();
    }

    // Our preferred controls via DeviceOrientation
    function setDeviceOrientationControls(e) {
        controls = new THREE.DeviceOrientationControls(camera, true);
        controls.connect();
        controls.update();
        window.removeEventListener('deviceorientation', setDeviceOrientationControls, true);
    }

    function animate() {
        requestAnimationFrame(animate);

        var width = window.innerWidth;
        var height = window.innerHeight;

        camera.aspect = width / height;
        camera.updateProjectionMatrix();

        renderer.setSize(width, height);
        effect.setSize(width, height);

        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        controls.update();
        effect.render(scene, camera);
    }
</script>
</body>
</html>
